<template>
  <div class="login">
    <div class="box">
      <h1 class="h1">登陆系统</h1>
      <el-form ref="formRef" :rules="rules" :model="formData" size="small">
        <!-- 用户名 -->
        <el-form-item prop="account">
          <el-input
           prefix-icon="iconfont icon-zhanghao"
           v-model="formData.account"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
          @keyup.native.enter="submit"
          :type="flag? 'text' : 'password'"
           v-model="formData.password">
            <i slot="prefix" class="iconfont icon-taocan-suoxiao"></i>
            <i 
            @click="flag=!flag"
            slot="suffix" class="iconfont"
            :class="!flag ? 'icon-close' : 'icon-eye-open'"
            ></i>
          </el-input>
        </el-form-item>
        <!-- 登录 -->
        <el-form-item>
          <el-button @click="submit" type="primary" class="btn">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

// import {checkLoginReq} from '@/api/user'
// console.log('checkLoginReq',checkLoginReq);

// 解构ajax接口函数
import {mapActions} from 'vuex'
// console.log(mapActions);
export default {
  data() {
    return {
      formData:{
        account: "",
        password: "",
      },
      
      // 眼睛
      flag: true,
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
      },
    };
  },

  methods:{
    // 解构异步方法
    ...mapActions('user',['A_login']),
    // 登录操作
    submit(){
      this.$refs.formRef.validate(async valid=>{
        // 判断
        if(valid){
          // 发送请求
         await this.A_login(this.formData)
          // let res =await checkLoginReq(this.formData)
          // console.log('this.formData',this.formData);
          // 跳转操作
          this.$router.push('/home')
        }
        else{
          console.log('失败');
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  // background-color: 45, 58, 75;
  background-color: rgb(45, 58, 75);

  .h1 {
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    .inp {
     
      .inp1 {
        margin-bottom: 20px;
      }
    }
  }
}

.btn{
  // width: 200px;
  width: 100%;
}

:deep(.el-input__inner) {
  background-color: transparent;
  color: #fff;
}
</style>